<html lang="en">
<head>
    <meta charset="utf8">
    <link rel="stylesheet" href="../css/ol.css" type="text/css">
    <style>
      .map {
        height: 100%;
        width: 100%;
      }

    </style>
    <script src="../js/jquery.min.3.2.1.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/ol.js"></script>
    <title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map">
    经度<input id="lon" type="text" value=""/> 纬度<input id="lat" type="text" value=""/>
    <button id="btn1">定位</button>
</div>
<script type="text/javascript">
      var layer=new ol.layer.Vector({
        source: new ol.source.Vector()
      });

      var tilelayer= new ol.layer.Tile({
            source: new ol.source.OSM()
          });

      var map = new ol.Map({
        target: 'map',
        layers: [
        tilelayer,layer
        ],
        view: new ol.View({
        projection: 'EPSG:4326',
         center:[117,42],
          zoom: 4,

        })
      });

      var btn=document.getElementById("btn1");

      btn.addEventListener("click",function(){
        var lon=document.getElementById("lon").value;
        var lat=document.getElementById("lat").value;
        var feature= new ol.Feature({
           geometry: new ol.geom.Point([lon,lat])
        });
        layer.getSource().addFeature(feature);
        map.getView().setCenter([lon,lat]);
        map.getView().setZoom(8);

        var radius = 0;
        //改变地图上的某个feature或者layer或者其他任何东西，就会触发重新渲染
        map.on('postcompose', function(){
        // 增大半径，最大20
        radius++;
        radius = radius % 20;
        // 设置样式
        feature.setStyle(new ol.style.Style({
            image: new ol.style.Circle({
                radius: radius,
                stroke: new ol.style.Stroke({
                    color: 'red',
                    size: 1
                   })
                 })
               }));
           });

      });


</script>
</body>
</html>